<template>
  <view class="index-container">
    <view class="search-section">
      <view class="search-box">
        <view class="search-input-box">
          <input
            class="search-input"
            type="text"
            v-model="searchKeyword"
            placeholder="搜索岗位名称/单位名称"
            @blur="handleSearchBlur"
          />
          <text v-if="searchKeyword" class="clear-icon" @tap="clearSearch">×</text>
        </view>
        <view class="search-btn" @tap="handleSearch">搜索</view>
      </view>
    </view>
    // ... existing code ...
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      // ... existing code ...
    }
  },
  methods: {
    // 处理搜索框失焦
    handleSearchBlur() {
      if (this.searchKeyword) {
        this.searchParams.keyword = this.searchKeyword;
        this.getList();
      }
    },
    
    // 清除搜索内容
    clearSearch() {
      this.searchKeyword = '';
      this.searchParams.keyword = '';
      this.getList();
    },
    
    // 处理搜索按钮点击
    handleSearch() {
      this.searchParams.keyword = this.searchKeyword;
      this.getList();
    },
    // ... existing code ...
  }
}
</script>

<style lang="scss" scoped>
.index-container {
  // ... existing code ...
  
  .search-section {
    padding: 10px 15px;
    background-color: #fff;
    
    .search-box {
      display: flex;
      align-items: center;
      
      .search-input-box {
        flex: 1;
        position: relative;
        margin-right: 10px;
        
        .search-input {
          width: 100%;
          height: 36px;
          background: #f5f5f5;
          border-radius: 18px;
          padding: 0 30px 0 15px;
          font-size: 14px;
        }
        
        .clear-icon {
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          color: #999;
          font-size: 18px;
          z-index: 1;
        }
      }
      
      .search-btn {
        width: 60px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        background: #3c96f3;
        color: #fff;
        border-radius: 18px;
        font-size: 14px;
      }
    }
  }
  // ... existing code ...
}
</style> 